<template>
  <div class="app">
    <!-- v-model实现双向绑定 -->
    <input type="text" v-model="msg1" />
    <br />
    <!-- v-model的原理实现双向绑定 -->
    <!-- v-model的原理就是 :value 和 @input事件的简写 -->
    <!-- 1.数据变，引起视图变  :value -->
    <!-- 2.视图变，数据跟着变  @input -->
    <input type="text" :value="msg2" @input="changeValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
  methods: {
    changeValue(e) {
      // console.log(e.target.value)
      this.msg2 = e.target.value
    },
  },
}
</script> 
<style>
</style>
 